<template>
  <div id="header">
    <Header></Header>
  </div>
  <div id="main" class="inner home-inner">
    <div class="filter-form">
      <el-form class="filter-form-job" v-if="select == 'job'" ref="filterformjob" :model="filterJobInfo" size="default">
        <el-form-item prop="filterAddress" >
          <el-cascader placeholder="工作地址" style="margin-bottom: 10px;" :options="options1" v-model="filterJobInfo.jobAddress" separator="-">
          </el-cascader>
        </el-form-item>
        <div class="filter-job-Other">
          <el-form-item prop="filterJobIdustry">
            <el-cascader placeholder="岗位行业" :options="proxy.$store.state.authState.job_industry"
              v-model="filterJobInfo.jobIndustry" clearable :show-all-levels="false" />
          </el-form-item>
          <el-divider direction="vertical" border-style="none" />
          <el-form-item prop="filterJobNature">
            <el-select placeholder="工作类型" v-model="filterJobInfo.jobNature" clearable>
              <el-option label="不限" value="不限" />
              <el-option label="实习" value="实习" />
              <el-option label="兼职" value="兼职" />
              <el-option label="全职" value="全职" />
            </el-select>
          </el-form-item>
          <el-divider direction="vertical" border-style="none" />
          <el-form-item prop="filterJobEx">
            <el-select placeholder="工作经验" v-model="filterJobInfo.jobEx" clearable>
              <el-option label="不限" value="不限" />
              <el-option label="经验不限" value="经验不限" />
              <el-option label="1年以下" value="1年以下" />
              <el-option label="2-3年" value="2-3年" />
            </el-select>
          </el-form-item>
          <el-divider direction="vertical" border-style="none" />
          <el-form-item prop="filterJobEdu">
            <el-select placeholder="学历要求" v-model="filterJobInfo.jobEdu" clearable>
              <el-option label="不限" value="不限" />
              <el-option label="大专" value="大专" />
              <el-option label="本科" value="本科" />
              <el-option label="研究生" value="研究生" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <el-form class="filter-form-e" v-if="select == 'enterprise'" ref="filterforme" :model="filterEInfo" size="default">
        <el-form-item prop="filterENature">
          <el-select placeholder="公司类型" v-model="filterEInfo.eNature" clearable>
            <el-option label="不限" value="不限" />
            <el-option label="国有企业" value="国有企业" />
            <el-option label="集体企业" value="集体企业" />
            <el-option label="私营企业" value="私营企业" />
          </el-select>
        </el-form-item>

        <el-divider direction="vertical" border-style="none" />
        <el-form-item prop="filterESize">
          <el-select placeholder="公司规模" v-model="filterEInfo.eSize" clearable>
            <el-option label="不限" value="不限" />
            <el-option label="20-99" value="20-99" />
            <el-option label="100-299" value="100-299" />
            <el-option label="300-499" value="300-499" />
            <el-option label="500-999" value="500-999" />
          </el-select>
        </el-form-item>
      </el-form>

    </div>
    <div class="filter-main">
      <div class="filter-job" v-if="select == 'job'">
        <div class="filter-empty" v-if="proxy.$store.state.jobState.jobs.length == 0">
          <img src="//img06.zhaopin.cn/www/personal-img/noJobTip.png" alt="很抱歉，您搜索的内容找不到！" title="很抱歉，您搜索的内容找不到！"
            width="460" height="160" class="page-empty__image">
          <div class="page-empty__tips">
            <p>
              很抱歉，您搜索的内容找不到！
              <br>换个条件试试吧
            </p>
          </div>
        </div>
        <div class="filter-job-cards">
          <div class="filter-job-card"
            v-for="(item , index) in proxy.$store.state.jobState.jobs.slice((page - 1) * page_size, page * page_size )"
            :key="item.jobId ">
            <router-link class="filter-job-info" :to="{ path: '/postionInfoPage', query: { jobId: item.jobId } }">
              <div class="job_top">
                <p class="job_name">{{ item.jobName }}</p>
                <p class="salary">{{ item.jobSalary }}</p>
              </div>
              <p class="job_text">
                <span class="job_time">{{ item.jobEx }}</span>
                <span class="job_item">{{ item.jobEdu }}</span>
                <span class="job_item">{{ item.jobAge }}</span>
                <span class="job_item">{{ item.jobNature }}</span>
              </p>
            </router-link>
            <router-link class="filter-job-com" :to="{ path: '/eInfoPage', query: { eId: item.eId } }">
              <p class="com_text">
                <img :src="item.eAvatar" alt="">
                <span class="com_name">
                  {{ item.eName }}
                </span>
              </p>
              <span class="com_place">
                {{ item.contactAddress }}
              </span>
            </router-link>
          </div>
        </div>
        <el-pagination v-if="proxy.$store.state.jobState.jobs.length > 0"
          style="display: flex;justify-content: center; margin-bottom: 20px;" v-model:current-page="page"
          layout="prev, pager, next" :total="proxy.$store.state.jobState.jobs.length"
          @current-change="handleCurrentChange" @size-change="handleSizeChange" v-model:page-size="page_size" />
      </div>
      <div class="filter-e" v-if="select == 'enterprise'">
        <div class="filter-empty" v-if="proxy.$store.state.eState.Es.length == 0">
          <img src="//img06.zhaopin.cn/www/personal-img/noJobTip.png" alt="很抱歉，您搜索的内容找不到！" title="很抱歉，您搜索的内容找不到！"
            width="460" height="160" class="page-empty__image">
          <div class="page-empty__tips">
            <p>
              很抱歉，您搜索的内容找不到！
              <br>换个条件试试吧
            </p>
          </div>
        </div>
        <div class="filter-e-cards">

          <div v-if="store.state.isGet" class="filter-e-card" v-for="(item, index) in proxy.$store.state.eState.Es.slice((page - 1) * page_size, page * page_size)"
            :key="item.eId">
            <router-link :to="{ path: '/eInfoPage', query: { eId: item.eId } }">
              <div class="line_1">
                <p class="e_name">{{ item.businessName }}</p>
              </div>
              <div class="line_2">
                <ul style="display: flex;">
                  <li class="e_li">性质：{{ item.eNature }}</li>
                  <li class="e_li">规模：{{ item.eSizeMin }}-{{ item.eSizeMax }}人</li>
                  <li class="e_li">行业：{{ item.eIndustry }}</li>
                </ul>
              </div>
              <div class="line_3">
                <p>地址：{{ item.contactAddress }}</p>
              </div>
            </router-link>
          </div>
        </div>
        <el-pagination v-if="proxy.$store.state.eState.Es.length > 0"
          style="display: flex;justify-content: center; margin-bottom: 20px;" v-model:current-page="page"
          layout="prev, pager, next" :total="proxy.$store.state.eState.Es.length" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" v-model:page-size="page_size" />
      </div>
      <div class="filter-adv">
        <div class="filter-adv-card">
          <a style="height: 200px; width: 100%;" href="/">
            <img class="filter-adv-img" :src="avatar_adv"></a>
        </div>
        <div class="filter-adv-card">
          <a style="height: 200px; width: 100%;" href="/">
            <img class="filter-adv-img" :src="avatar_adv"></a>
        </div>
        <div class="filter-adv-card">
          <a style="height: 200px; width: 100%;" href="/">
            <img class="filter-adv-img" :src="avatar_adv"></a>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <Footer></Footer>
  </div>
</template>

<script lang="ts"  setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import { reactive, ref, onBeforeMount, onMounted, computed, watch, getCurrentInstance } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { useStore } from "vuex"
import { provinceAndCityDataPlus } from 'element-china-area-data'
import type { FormInstance, FormRules } from 'element-plus'
import { getAddressCode, getAddressText, elmessage, data } from "@/hook/hook"
import { getAllJobInfo, getAllEInfo, getFilterJobs, getFilterEs, getJobIndustry } from "@/api/authApi"
import { getEAvatar } from "@/api/enterpriseApi"
import { filterJobInfo, filterEInfo } from "@/utills/userInfoValidators"
const route = useRoute()
const store = useStore()
const router = useRouter()
const isShow = ref()

const type = computed(() => store.state.searchType)
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例
// 筛选表单
const avatar = require('/public/avatar.jpg')
const avatar_adv = require("/public/adv.jpg")
const filterformjob = ref<FormInstance>()
const filterforme = ref<FormInstance>()

// 分页器
// 选择的页数
const page = ref(1)
// 每页多少个
const page_size = ref(10)
// 分页器展示出来多少个页
const pager_count = ref(4)
const handleCurrentChange = (val: number) => {
  page.value = val
}
const handleSizeChange = (val: number) => {
  // pushTableData()
  page_size.value = val
  page.value = 1
}

const options1 = provinceAndCityDataPlus

const searchinput = ref('')
const select = ref('job')
interface JobTables{
  
}
const jobTables=reactive([])

const search = () => {
  store.state.jobState.jobs = []
  store.state.eState.Es = []
  if (route.fullPath != "/") {
    var wd = ""
    var type = ""
    // /search?type=job&wd=程序员
    if (route.fullPath.indexOf("?") != -1) {
      
      if (route.fullPath.indexOf("&") != -1) {
        searchinput.value = decodeURIComponent(route.fullPath.split("&")[1].split("wd=")[1])
        select.value = route.fullPath.split("type=")[1].split("&")[0]
      } else {
        // console.log(22);
        
        searchinput.value = ""
        select.value = route.fullPath.split("type=")[1]
      }
      getDatas()
    } else {
      
      searchinput.value = ""
      select.value = ""
    }

  } else {
    select.value = "job"
    searchinput.value = ""
  }
}
// 按输入框、筛选条件获取岗位或者公司
const getDatas = () => {
  store.state.jobState.jobs = []
  store.state.eState.Es = []
  // getValue()

  if (select.value == "job") {
    const searchData = {
      ...filterJobInfo,
      jobAddress: getAddressText(filterJobInfo.jobAddress),
      wd: searchinput
    }
    getFilterJobs(searchData).then((res: any) => {
      res.data.jobs.forEach((valu: any, inde: any, sel: any) => {
        const data = { eId: valu.eId }
        getEAvatar(data).then((re: any) => {
          if (re.data.type == "image.jpeg/png") {
            store.state.jobState.jobs.push(
              {
                ...valu,
                eAvatar: window.URL.createObjectURL(re.data)
              }
            )
          } else {
            console.log(re.data);
          }
        })
      })
      store.state.loading = false
      if (store.state.jobState.jobs.length != 0) {
        store.state.isGet = true
      } else {
        store.state.isGet = false
      }

    })
  }
  else if (select.value == "enterprise") {
    const searchData = {
      ...filterEInfo,
      wd: searchinput
    }
    getFilterEs(searchData).then((res: any) => {
      res.data.es.forEach((value: any, inde: any, sel: any) => {
        store.state.eState.Es.push(value)
      })
      setTimeout(() => {
        store.state.loading = false
        if (store.state.eState.Es.length != 0) {
          store.state.isGet = true
        } else {
          store.state.isGet = false
        }
      }, 1000);
    })

  }
}

watch(filterJobInfo, (newval, oldval) => {
  search()
  // getDatas()
})
watch(filterEInfo, (newval, oldval) => {
  search()
  // getDatas()
})

onBeforeMount(() => {
  search()
  
  getJobIndustry().then((res: any) => {
    store.state.authState.job_industry = reactive(res.data.job_industry)
  })
})

</script>


<style scoped>
.filter-adv-img {
  display: block;
  width: 100%;
  height: 100%;
}

.filter-adv-card {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;

}

.filter-job-Other {
  display: inline-flex;
}

.el-form-item--default {
  margin-bottom: 0px !important;
}

.filter-form-e {
  height: 60px;
  display: flex;
  /* padding-top: 10px; */
  padding-left: 20px;
  /* padding-bottom: 10px; */
  background-color: #fff;
  border-radius: 10px;
}

.filter-form-job {
  padding-top: 10px;
  padding-left: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 10px;
}

.filter-form {
  /* margin-left: 10px; */
  width: 100%;
  /* height: 200px; */

}

.filter-main {
  display: flex;
  width: 100%;
  /* height: 600px; */
  /* background-color: #2052a4; */
  margin-top: 30px;
  justify-content: space-between;
}

.filter-e {
  width: 890px;
  height: 100%;
  /* background-color: #fff; */
}

.filter-job {
  width: 890px;
  height: 100%;
  /* background-color: #fff; */
}

.filter-adv {
  width: 230px;
  height: 100%;
  /* background-color: aqua; */
}

.inner {
  width: 1160px;
  margin: 0 auto;
}

.home-inner {
  max-width: 1160px;
}

#header {
  font-family: '微软雅黑';
  height: 58px;
  background-color: #545c64;
}

#main {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#footer {
  height: 140px;
  background-color: #545c64;
  color: #FFF;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: '微软雅黑';
}

/* 没有数据 */
.filter-empty {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 440px;
  background: #fff;
  overflow: hidden;
}

.page-empty__image {
  width: 460px;
  height: 160px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -230px;
}

.page-empty__tips {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 26px;
  font-size: 16px;
  color: #666;
}

/* 卡片 */
/* 公司 */
.e_name {
  color: #2052a4;
  font-size: 24px;
  padding-left: 10px;
}

.line_3 {
  padding-left: 10px;
}

.line_2 {
  height: 35px;
  margin-top: 5px;
}

.e_li {
  color: black;
  font-size: 18px;
  padding-left: 10px;
}

.line_1 {
  height: 35px;

}

.filter-e-card {
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #FFFF;
  height: 136px;
  border-radius: 10px;
  /* width: 940px; */

}

.filter-e-card:hover {
  transition: border linear .2s;
  box-shadow: 0 0 18px rgba(213, 208, 213, 3);
}

/* 岗位 */
.job_title {
  border-bottom: 2px solid rgb(210, 202, 202);
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  font-weight: bold;
  font-family: '微软雅黑';

}

.filter-job-card {
  margin-bottom: 20px;
  background-color: #FFFF;
  border-radius: 10px 10px;
  height: 136px;

}
.filter-job-card:hover {
  transition: border linear .2s;
  box-shadow: 0 0 18px rgba(213, 208, 213, 3);
}

a {
  text-decoration: none;
  /* 将a里面的元素写进他的范围内 a为行元素*/
  display: inline-block
}

.filter-job-info {
  /* 流式布局，会把borders和padding全都包含在定义的宽高，这样内容不会超出范围 */
  box-sizing: border-box;
  width: 100%;
  padding: 16px 20px;
}

.job_top {
  margin-bottom: 6px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.salary {
  color: rgb(208, 9, 9);
}

.job_text {
  height: 22px;
  margin-top: 10px;
  display: flex;
  align-items: center;

}

p {
  color: black;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-family: '微软雅黑';
}

span {
  font-size: 12px;
  font-weight: 500;
  color: rgb(104, 104, 104);
  background-color: rgb(246, 246, 246);
  padding: 1px 0px 2px 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px;
  font-family: '微软雅黑';
  /* margin: 0 0 4px 0; */
}

.job_time {
  margin-right: 2px;
}

.job_item {
  margin-left: 2px;
}

.filter-job-com {
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  padding: 13px 18px;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(246, 246, 246);
}

img {
  border-radius: 5px;
  height: 24px;
  width: 24px;
}

.com_text {
  display: flex;
  align-items: center;
}

.com_name {
  font-size: 16px;
}

.com_place {
  font-size: 14px;
}
</style>